// 情绪指数Vue组件
const QingxuComponent = {
    template: `
        <div class="qingxu-page">
            <div class="page-header">
                <h2>情绪指数</h2>
                <div class="header-actions">
                    <el-button type="primary" @click="refreshData" :loading="loading">
                        <i class="el-icon-refresh"></i>
                        刷新数据
                    </el-button>
                    <el-button @click="resetSelection">
                        <i class="el-icon-close"></i>
                        清除选择
                    </el-button>
                </div>
            </div>

            <!-- 情绪指数表格 -->
            <div class="qingxu-container">
                <table class="qingxu-table" v-if="qingxuData.length > 0">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>涨停数</th>
                            <th>跌停数</th>
                            <th>上涨数</th>
                            <th>下跌数</th>
                            <th>最高连板</th>
                            <th>二板数</th>
                            <th>三板数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in qingxuData" 
                            :key="item.dateTime"
                            :class="getRowClass(item)"
                            @click="handleRowClick(item)">
                            <td>{{ formatDate(item.dateTime) }}</td>
                            <td>
                                <span style="color: #f56c6c; font-weight: bold;">
                                    {{ item.ztNum || 0 }}
                                </span>
                            </td>
                            <td>
                                <span style="color: #67c23a; font-weight: bold;">
                                    {{ item.dtNum || 0 }}
                                </span>
                            </td>
                            <td>
                                <span :style="{ color: (item.zhangNum || 0) > 3000 ? '#f56c6c' : '#303133', 'font-weight': (item.zhangNum || 0) > 3000 ? 'bold' : 'normal' }">
                                    {{ item.zhangNum || 0 }}
                                </span>
                            </td>
                            <td>
                                <span :style="{ color: (item.dieNum || 0) > 3000 ? '#67c23a' : '#303133', 'font-weight': (item.dieNum || 0) > 3000 ? 'bold' : 'normal' }">
                                    {{ item.dieNum || 0 }}
                                </span>
                            </td>
                            <td>{{ item.zuiGaoLianBan || '-' }}</td>
                            <td>{{ item.erlanbanNum || 0 }}</td>
                            <td>{{ item.sanlanbanNum || 0 }}</td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 无数据提示 -->
                <el-empty v-else description="暂无情绪指数数据" :image-size="200">
                    <el-button type="primary" @click="refreshData">刷新数据</el-button>
                </el-empty>
            </div>

            <!-- 详细信息面板 -->
            <div class="qingxu-detail-panel" v-if="selectedDate">
                <div class="panel-header">
                    <h3>{{ formatDate(selectedDate) }} 市场情绪详情</h3>
                    <button class="close-btn" @click="selectedDate = null">×</button>
                </div>
                <div class="detail-content">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card class="stat-card">
                                <div class="stat-title">涨停数</div>
                                <div class="stat-value" style="color: #f56c6c;">
                                    {{ getSelectedData().ztNum || 0 }}
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card class="stat-card">
                                <div class="stat-title">跌停数</div>
                                <div class="stat-value" style="color: #67c23a;">
                                    {{ getSelectedData().dtNum || 0 }}
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card class="stat-card">
                                <div class="stat-title">上涨数</div>
                                <div class="stat-value" :style="{ color: (getSelectedData().zhangNum || 0) > 3000 ? '#f56c6c' : '#303133' }">
                                    {{ getSelectedData().zhangNum || 0 }}
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card class="stat-card">
                                <div class="stat-title">下跌数</div>
                                <div class="stat-value" :style="{ color: (getSelectedData().dieNum || 0) > 3000 ? '#67c23a' : '#303133' }">
                                    {{ getSelectedData().dieNum || 0 }}
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="8">
                            <el-card class="stat-card">
                                <div class="stat-title">最高连板</div>
                                <div class="stat-value">{{ getSelectedData().zuiGaoLianBan || '-' }}</div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="stat-card">
                                <div class="stat-title">二板数</div>
                                <div class="stat-value">{{ getSelectedData().erlanbanNum || 0 }}</div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="stat-card">
                                <div class="stat-title">三板数</div>
                                <div class="stat-value">{{ getSelectedData().sanlanbanNum || 0 }}</div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </div>

            <!-- 统计信息 -->
            <div class="statistics-panel" v-if="qingxuData.length > 0">
                <h3>统计信息</h3>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="stat-card">
                            <div class="stat-title">数据记录数</div>
                            <div class="stat-value">{{ qingxuData.length }}</div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="stat-card">
                            <div class="stat-title">最新涨停数</div>
                            <div class="stat-value" style="color: #f56c6c;">
                                {{ qingxuData[0].ztNum || 0 }}
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="stat-card">
                            <div class="stat-title">最新跌停数</div>
                            <div class="stat-value" style="color: #67c23a;">
                                {{ qingxuData[0].dtNum || 0 }}
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="stat-card">
                            <div class="stat-title">最后更新时间</div>
                            <div class="stat-value">{{ lastUpdateTime }}</div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    `,
    
    data() {
        return {
            loading: false,
            lastUpdateTime: new Date().toLocaleString(),
            qingxuData: [],
            selectedDate: null
        }
    },
    
    methods: {
        async refreshData() {
            this.loading = true;
            try {
                await this.loadQingxuData();
                this.lastUpdateTime = new Date().toLocaleString();
            } finally {
                this.loading = false;
            }
        },
        
        async loadQingxuData() {
            try {
                const url = `/api/qingxu/get`;
                console.log('正在请求情绪指数数据URL:', url);
                
                const response = await axios.get(url);
                console.log('情绪指数数据API响应:', response.data);
                
                if (response.data && response.data.code === 200) {
                    const qingxuData = response.data.data || [];
                    this.processQingxuData(qingxuData);
                    console.log('成功加载情绪指数数据');
                } else if (Array.isArray(response.data)) {
                    // 直接返回数组的情况
                    this.processQingxuData(response.data);
                    console.log('成功加载情绪指数数据');
                } else {
                    console.error('情绪指数数据格式异常:', response.data);
                }
            } catch (error) {
                console.error('加载情绪指数数据失败:', error);
            }
        },

        processQingxuData(data) {
            console.log('开始处理情绪指数数据:', data);
            
            if (!Array.isArray(data)) {
                console.error('情绪指数数据格式错误: 不是数组格式');
                this.qingxuData = [];
                return;
            }

            // 按日期排序
            this.qingxuData = data.sort((a, b) => new Date(b.dateTime) - new Date(a.dateTime));
            console.log('处理后的情绪指数数据:', this.qingxuData);
        },
        
        resetSelection() {
            this.selectedDate = null;
        },
        
        getRowClass(item) {
            return {
                'selected-row': this.selectedDate === item.dateTime
            };
        },
        
        handleRowClick(item) {
            if (this.selectedDate === item.dateTime) {
                this.selectedDate = null;
            } else {
                this.selectedDate = item.dateTime;
            }
        },
        
        formatDate(dateStr) {
            if (!dateStr) return '';
            if (dateStr.length === 8) {
                return `${dateStr.substring(0, 4)}-${dateStr.substring(4, 6)}-${dateStr.substring(6, 8)}`;
            }
            return dateStr;
        },
        
        getSelectedData() {
            return this.qingxuData.find(item => item.dateTime === this.selectedDate) || {};
        }
    },
    
    mounted() {
        console.log('情绪指数组件启动');
        this.loadQingxuData();
    }
};